<template>
   <div>
        <h1>异步组件的演示案例</h1>
        <button @click="handleclick">按钮</button>
        <div v-if="show">
            <AsyncList></AsyncList>
        </div>
   </div>
</template>

<script>
import LoadingComponent from '@/components/LoadingComponent.vue'
import ErrorComponent from '@/components/ErrorComponent.vue'
//定义了一个关于异步组件的对象
const AsyncList=()=>{
    return{
      //component:要加载的组件，组件使用异步方式加载
      component:import('@/components/MyList.vue'),
      //加载中显示的组件
      loading:LoadingComponent,
      //在指定的毫秒数内没有加载进来则进入该组件
      error:ErrorComponent,
      //延时毫秒数
      delay:200,
      //超时时间毫秒数
      timeout:21500,
    }
}
export default {
    components:{
       AsyncList
    },
    data(){
        return{
            show:false
        }
    },
    methods:{
        handleclick(){
            this.show=!this.show
        }
    } 
}
</script>

<style>

</style>